<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-date-picker type="datetime" placeholder="开始时间" v-model="filters.startTime" style="width:100%;"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-date-picker type="datetime" placeholder="结束时间" v-model="filters.endTime" style="width:100%;"></el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">上传</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" stripe border>
			<el-table-column type="index" width="200" label="编号" align="center" >
			</el-table-column>
			<el-table-column prop="image" label="启动页图" width="380" align="center" >
				<template slot-scope="scope">
					<img :src="scope.row.image" width="60" height="40" align="center" />
				</template>
			</el-table-column>
			<el-table-column prop="displayTime" label="定时上传时间"  width="350" align="center" >
				<template slot-scope="scope">
					<span>{{scope.row.displayTime | formatDate}} </span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="350" align="center" >
				<template slot-scope="scope">
					<span>{{scope.row.createTime | formatDate}} </span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="350" align="center" >
				<template slot-scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
					<!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination
	          class="top"
	          @size-change="handleSizeChange"
	          @current-change="handleCurrentChange"
	          :current-page="currentPage"
	          :page-sizes="[10, 15, 20, 30]"
	          :page-size="pageSize"
	          layout="total, sizes, prev, pager, next, jumper"
	          :total='total'
	          style="float:right;">
	        </el-pagination>
		</el-col>

		<!--查询界面-->
		<el-dialog title="详情" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="120px" :rules="editFormRules" ref="editForm">
				<el-form-item label="图片预览" prop="image">
	              <el-card :body-style="{ width: 300,height: 150 }">
		              <div style="width: 600px;height: 450px;">
						 <img style="width:100%;height: 100%;" :src="editForm.image" class="image">
					 </div>
	              </el-card>

	            </el-form-item>
				<el-form-item label="定时上传时间">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="editForm.displayTime" :readonly="true"></el-date-picker>
				</el-form-item>
			</el-form>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="120px" :rules="addFormRules" ref="addForm">
				<el-form-item label="上传banner图片">
					<el-upload class="upload-demo" action="/file/upload"
							   name="file"
							   :data="fileType1"
							   :on-success="onSuccess"
							   :on-error="onError"
							   multiple
							   :limit="1"
							   list-type="picture-card"
							   :on-exceed="handleExceed"
							   :file-list="fileList"
					>
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>

		        <el-form-item label="图片成功地址" prop="image" v-show="false">
		              <el-input  v-model="addForm.image" auto-complete="off" placeholder="请输入url地址"></el-input>
		        </el-form-item>
				<el-form-item label="定时推送时间" prop="displayTime">
					<el-date-picker type="datetime" placeholder="选择日期" v-model="addForm.displayTime"></el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import {formatDate} from '@/common/js/util';
	
	import { queryStartup,addStartup,deleteStartup } from '../../api/api';


	export default {
		filters: {
            formatDate(time) {
                var date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
            }
        },
		data() {
			return {

				filters: {
					startTime: '',
					endTime:''
				},
				users: [],
				//分页
				total: 0,
				page: 1,
				pageSize:10,
				currentPage:1,
				listLoading: false,
				sels: [],//列表选中列

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
				},
				//编辑界面数据
				editForm: {
					id: 0,
					image: '',
					displayTime: '',
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
				addFormRules: {
					displayTime: [
		             	{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
		            ],
				},
				//新增界面数据
				addForm: {
					image: '',
					displayTime: '',
				},
				typeChoose: '1',
				fileType1:{
		          "fileType" : "SUMMARY_EVENT"
		        },
		        fileList:[],

			}
		},
		methods: {
			//分页
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			handleSizeChange(val) {
		        this.pageSize = val;
		        this.getUsers();
		    },
		    //上传
			onSuccess(response, file, fileList) {
		       this.addForm.image = response.body;
		    },

			onError(response, file, fileList) {
		        this.$message({
		          showClose: true,
		          message: '图片上传失败！',
		          type: 'error'
		        });
		      },

		    handleExceed(files, fileList) {
		        this.$message.warning(`当前超出限制！本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		    },
		    onSuccessUpdate(response, file, fileList) {
		        this.editForm.imgUrl = file.response.data;
		    },
		    onErrorUpdate(response, file, fileList){
		        this.$message({
		          showClose: true,
		          message: '图片上传失败！',
		          type: 'error'
		        });
		    },

			//获取用户列表
			getUsers() {
				let para = {
					page: this.page,
					push_type: this.filters.push_type,
					pageSize: this.pageSize,
					pageIndex: this.page,
				};
				if(!this.filters.startTime == '') {
				   para.startTime = this.filters.startTime
				}
				if(!this.filters.endTime == '') {
				   para.endTime = this.filters.endTime
				}
				this.listLoading = true;
				queryStartup(para).then((res) => {
					console.log(res.data);
					this.total = res.data.totalCount;
					this.users = res.data.data;
					this.listLoading = false;
					//NProgress.done();
				});
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { id: row.id };
					deleteStartup(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.addForm = {
					image: '',
					displayTime: '',
				};
			},
			//新增
			addSubmit: function () {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.addLoading = true;
							var para = {image:this.addForm.image,displayTime:this.addForm.displayTime};
							console.log(para)
							addStartup(para).then((res) => {
								this.addLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['addForm'].resetFields();
								this.addFormVisible = false;
								this.getUsers();
							});
						});
					}
				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					//NProgress.start();
					let para = { ids: ids };
					batchRemoveUser(para).then((res) => {
						this.listLoading = false;
						//NProgress.done();
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.getUsers();
					});
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.getUsers();
		}
	}

</script>

<style scoped>

</style>
